<template>
	<view>
		<van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" />
		<view class="orber-tab">
			<van-tabs v-model:active="active" sticky>
				<van-tab title="全部">
					<view class="allin" v-for="(item,index) in data" :key="index">
						<view class="allin-in" >
							<view class="allin-in-top">
								<image :src='item.zp' class="alin-img" />
								<text class="alin-title">{{item.title}}</text>
								<view class="allin-in-right">
									<view class="data-price">￥{{item.price}}</view>
									<view class="data-num">x{{item.num}}</view>
									<view class="data-stat1">{{item.stat==1?"待付款":''}}</view>
									<view class="data-stat2">{{item.stat==2?'已付款':''}}</view>
									<view class="data-stat3">{{item.stat==3?'已发货':''}}</view>
									<view class="data-stat4">{{item.stat==4?'交易成功':''}}</view>
								</view>

							</view>
							<view class="allin-in-bottom">
								<view class="allin-bottom-left">
									<text class="data-hj">合计:&nbsp;￥{{item.price}}</text>
								</view>
								<view class="allin-bottom-right" v-show="item.stat==1">
									<van-button plain type="danger" size="small">待付款</van-button>
								</view>
								<view class="allin-bottom-right" v-show="item.stat==2">
									<van-button plain type="primary" size="small">待发货</van-button>
								</view>
								<view class="allin-bottom-right" v-show="item.stat==3">
									<van-button plain type="warning" size="small">待收货</van-button>
								</view>
								<view class="allin-bottom-right" v-show="item.stat==4">
									<van-button plain type="danger" size="small">已完成</van-button>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="待付款">
					<view class="allin" v-for="(item,index) in data" :key="index">
						<view class="allin-in"  v-show="item.stat==1">
							<view class="allin-in-top">
								<image :src='item.zp' class="alin-img" />
								<text class="alin-title">{{item.title}}</text>
								<view class="allin-in-right">
									<view class="data-price">￥{{item.price}}</view>
									<view class="data-num">x{{item.num}}</view>
									<view class="data-stat1">{{item.stat==1?"待付款":''}}</view>
									<view class="data-stat2">{{item.stat==2?'已付款':''}}</view>
									<view class="data-stat3">{{item.stat==3?'已发货':''}}</view>
									<view class="data-stat4">{{item.stat==4?'交易成功':''}}</view>
								</view>

							</view>
							<view class="allin-in-bottom">
								<view class="allin-bottom-left">
									<text class="data-hj">合计:&nbsp;￥{{item.price}}</text>
								</view>
								<view class="allin-bottom-right">
									<view class="allin-bottom-right" v-show="item.stat==1">
										<van-button plain type="danger" size="small">待付款</van-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="待发货">
					<view class="allin" v-for="(item,index) in data" :key="index" >
						<view class="allin-in" v-show="item.stat==2">
							<view class="allin-in-top">
								<image :src='item.zp' class="alin-img" />
								<text class="alin-title">{{item.title}}</text>
								<view class="allin-in-right">
									<view class="data-price">￥{{item.price}}</view>
									<view class="data-num">x{{item.num}}</view>
									<view class="data-stat2">{{item.stat==2?'待发货':''}}</view>
								</view>

							</view>
							<view class="allin-in-bottom">
								<view class="allin-bottom-left">
									<text class="data-hj">合计:&nbsp;￥{{item.price}}</text>
								</view>
								<view class="allin-bottom-right">
									<view class="allin-bottom-right" v-show="item.stat==2">
										<van-button plain type="primary" size="small">待发货</van-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="待收货">
					<view class="allin" v-for="(item,index) in data" :key="index">
						<view class="allin-in"  v-show="item.stat==3">
							<view class="allin-in-top">
								<image :src='item.zp' class="alin-img" />
								<text class="alin-title">{{item.title}}</text>
								<view class="allin-in-right">
									<view class="data-price">￥{{item.price}}</view>
									<view class="data-num">x{{item.num}}</view>
									<view class="data-stat3">{{item.stat==3?'已发货':''}}</view>
								</view>

							</view>
							<view class="allin-in-bottom">
								<view class="allin-bottom-left">
									<text class="data-hj">合计:&nbsp;￥{{item.price}}</text>
								</view>
								<view class="allin-bottom-right">
									<view class="allin-bottom-right" v-show="item.stat==3">
										<van-button plain type="warning" size="small">待收货</van-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="已完成">
					<view class="allin" v-for="(item,index) in data" :key="index">
						<view class="allin-in"  v-show="item.stat==4">
							<view class="allin-in-top">
								<image :src='item.zp' class="alin-img" />
								<text class="alin-title">{{item.title}}</text>
								<view class="allin-in-right">
									<view class="data-price">￥{{item.price}}</view>
									<view class="data-num">x{{item.num}}</view>
									<view class="data-stat4">{{item.stat==4?'已完成':''}}</view>
								</view>

							</view>
							<view class="allin-in-bottom">
								<view class="allin-bottom-left">
									<text class="data-hj">合计:&nbsp;￥{{item.price}}</text>
								</view>
								<view class="allin-bottom-right">
									<van-button plain type="default" size="small">去评价</van-button>
									<van-button plain type="danger" size="small"
										style="margin-left: 10rpx;">再次购买</van-button>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref} from "vue";
	import img from './dy.jpg'
	import {onLoad,} from "@dcloudio/uni-app";
	const active = ref(0);
	const data = ref([{
			zp: img,
			title: '汉鼎鱼竿手竿碳素杆超轻超硬钓鱼竿垂钓鲫鱼竿渔具28调台吊杆套装',
			price: 59,
			num: 1,
			stat: 1
		},
		{
			zp: img,
			title: '汉鼎鱼竿手竿碳素杆超轻超硬钓鱼竿垂钓鲫鱼竿渔具28调台吊杆套装',
			price: 79,
			num: 1,
			stat: 2
		},
		{
			zp: img,
			title: '汉鼎鱼竿手竿碳素杆超轻超硬钓鱼竿垂钓鲫鱼竿渔具28调台吊杆套装',
			price: 86,
			num: 2,
			stat: 3
		},
		{
			zp: img,
			title: '汉鼎鱼竿手竿碳素杆超轻超硬钓鱼竿垂钓鲫鱼竿渔具28调台吊杆套装',
			price: 79,
			num: 1,
			stat: 2
		},
		{
			zp: img,
			title: '汉鼎鱼竿手竿碳素杆超轻超硬钓鱼竿垂钓鲫鱼竿渔具28调台吊杆套装',
			price: 45,
			num: 3,
			stat: 4
		},
		{
			zp: img,
			title: '汉鼎鱼竿手竿碳素杆超轻超硬钓鱼竿垂钓鲫鱼竿渔具28调台吊杆套装',
			price: 20,
			num: 2,
			stat: 1
		},
	])
	const onClickLeft = () => {
		uni.switchTab({
			url: '/pages/tabbar/tabbar-5/tabbar-5'
		});
	}
	
	onLoad((option) => {
		active.value = Number(option.arb)
	});
	
</script>
<style lang="less" scoped>
	::v-deep.van-nav-bar {
		padding: 0 !important;
		box-shadow: 3rpx 3rpx 3rpx 3rpx #e1e1e2;
	}

	::v-deep.van-tab__pane--active {
		background-color: #f0f0f2;
	}

	.allin {
		background-color: white;

		.allin-in {
			padding: 10rpx;
			margin-top: 15rpx;

			.allin-in-top {
				display: flex;

				image {
					width: 120rpx !important;
					height: 120rpx !important;
				}

				.alin-title {
					width: 65%;
					font-size: 24rpx;
					margin: 0 15rpx;
					font-weight: 600;
				}

				.allin-in-right {

					.data-price,
					.data-num {
						color: #d7d7d7;
						font-size: 24rpx;
						text-align: right;
					}

					.data-stat1,
					.data-stat2,
					.data-stat3,
					.data-stat4 {
						font-size: 24rpx;
					}

					.data-stat1 {
						color: red;
					}

					.data-stat2 {
						color: #8bc34a;
					}

					.data-stat3 {
						color: #ff9e0f;
					}

					.data-stat4 {
						color: #ff9e0f;
					}
				}
			}

			.allin-in-bottom {
				display: flex;
				height: 55rpx;
				justify-content: space-between;

				.allin-bottom-left {
					.data-hj {
						font-size: 24rpx;
					}
				}

				.allin-bottom-right {}
			}
		}
	}
</style>